<template>
  <div>
    <div class="container">
      <div>
        <ol class="breadcrumb">
          <li><a href="#">工具箱</a></li>
          <li>图标制作</li>
        </ol>
      </div>
      <div class="box">
        <div class="boxleft">
          <div class="boxleftTitle">效果预览</div>
          <div class="iconBoxFa">
            <div class="iconBox">
              <div
                ref="contain"
                class="boxleft_img"
                id="icon"
                :class="{ radius: !isiconstyle }"
                :style="[right_bg, rightBgimg]"
              >
                <img
                  v-show="isFaceToggle"
                  :style="boxleft_img_position"
                  :src="boxleft_img_icon"
                  alt=""
                />
                <div
                  v-show="!isFaceToggle"
                  style="color: fontIcon"
                  :style="boxleft_img_Font"
                >
                  {{ fontIcon }}
                </div>
              </div>
            </div>
          </div>
          <div class="boxleft_msg">
            右边选择完成后，点击自己想要的图片尺寸吧！
          </div>
          <div class="imgSizeBox">
            <div
              class="imgSize"
              @click="useimgSize(item.value)"
              v-for="item in imgSize"
              :key="item.id"
            >
              <img :src="item.icon" alt="" />{{ item.size }}
            </div>
          </div>
        </div>
        <div class="boxright">
          <div class="right_title"><span></span><span>效果预览</span></div>
          <div class="right_picker">
            <span class="right_small_title1">背景图色值：</span>
            <el-color-picker
              class="picker"
              v-model="right_bg.backgroundColor"
            ></el-color-picker>
          </div>
          <div class="right_bg_box">
            <span class="right_small_title2">背景图效果：</span>
            <div
              class="right_bg"
              @click="
                useBg({
                  id: -1,
                  bgIcon: '/static/workbox/AppIcon/bgStyle/bg00.png'
                })
              "
              :style="right_bg"
            >
              <img
                class="select"
                v-show="selectShow == -1"
                src="/static/workbox/AppIcon/selectPure.png"
              />
            </div>
            <div
              class="right_bg"
              :style="right_bg"
              @click="useBg(item)"
              v-for="item in imgBg"
              :key="item.id"
            >
              <img :src="item.bgIcon" /><img
                class="select"
                v-show="selectShow == item.id"
                src="/static/workbox/AppIcon/select.png"
              />
            </div>
          </div>
          <div class="right_title"><span></span><span>前景图</span></div>
          <div class="right_count_box">
            <div
              class="right_count_box_one"
              @click="useImg"
              :class="{ active: isactive }"
            >
              使用图形
            </div>
            <div
              class="right_count_box_tow"
              @click="useFont"
              :class="{ active: !isactive }"
            >
              使用文字
            </div>
            <div class="triangle1" v-show="isactive">
              <img src="/static/workbox/AppIcon/triangle.png" alt="" />
            </div>
            <div class="triangle2" v-show="!isactive">
              <img src="/static/workbox/AppIcon/triangle.png" alt="" />
            </div>
          </div>
          <div v-show="isactive">
            <div class="right_faceImg">
              <div class="right_small_title1">选择图形：</div>
              <div class="right_faceImg_box">
                <div
                  class="faceImg"
                  @click="useFaceImg(item)"
                  v-for="item in faceImg"
                  :key="item.id"
                >
                  <img
                    :class="{ active: selectfaceImg == item.id }"
                    :src="item.faIcon"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="right_faceImg_location">
              <div class="right_small_title1">前景图位置：</div>
              <el-radio-group
                class="radio_group"
                v-model="radio"
                @change="faceImgPosition(radio)"
              >
                <el-radio :label="1">居中</el-radio>
                <el-radio :label="2">居上</el-radio>
                <el-radio :label="3">居下</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div v-show="!isactive">
            <div
              class="right_picker"
              style="height: 36px; line-height: 36px; margin-top: 24px"
            >
              <span class="right_small_title1">编辑文字：</span>
              <input
                class="font_color"
                placeholder="请输入1-4个字符，支持中文/英文/数字"
                v-model="fontIcon"
                @input="inputFont()"
                type="text"
              />
            </div>
            <div class="right_picker" style="margin-top: 16px">
              <span class="right_small_title1">文字颜色：</span>
              <el-color-picker
                class="picker"
                @change="changeColor(color2)"
                v-model="color2"
              ></el-color-picker>
            </div>
          </div>
          <div class="right_title" style="float: left">
            <span></span><span>形状选择</span>
          </div>
          <div class="iconstyle">
            <div
              class="styleOne"
              @click="useSquare"
              :class="{ active: isiconstyle }"
            >
              方形图标
            </div>
            <div
              class="styleTow"
              @click="useRound"
              :class="{ active: !isiconstyle }"
            >
              圆角图标
            </div>
          </div>
          <div class="right_title" style="float: left">
            <span></span><span>格式选择</span>
          </div>
          <div class="iconstyle">
            <div
              class="styleOne"
              @click="useFileStyle('jpg')"
              :class="{ active: isFileStyle }"
            >
              JPG格式
            </div>
            <div
              class="styleTow"
              @click="useFileStyle('png')"
              :class="{ active: !isFileStyle }"
            >
              png格式
            </div>
          </div>
        </div>
      </div>
    </div>
    <statement></statement>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import Canvas2Image from "./Canvas2Image";
import statement from "@/components/common/statement";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    statement,
    html2canvas
  },
  data() {
    //这里存放数据
    return {
      //下载图片的尺寸
      imgSize: [
        {
          id: 0,
          icon: "/static/workbox/AppIcon/imgSizeDown.png",
          size: "16*16",
          value: 16
        },
        {
          id: 1,
          icon: "/static/workbox/AppIcon/imgSizeDown.png",
          size: "44*44",
          value: 44
        },
        {
          id: 2,
          icon: "/static/workbox/AppIcon/imgSizeDown.png",
          size: "66*66",
          value: 66
        },
        {
          id: 3,
          icon: "/static/workbox/AppIcon/imgSizeDown.png",
          size: "114*114",
          value: 114
        },
        {
          id: 4,
          icon: "/static/workbox/AppIcon/imgSizeDown.png",
          size: "180*180",
          value: 180
        },
        {
          id: 5,
          icon: "/static/workbox/AppIcon/imgSizeDown.png",
          size: "1024*1024",
          value: 1024
        }
      ],
      //背景图片
      imgBg: [
        {
          id: 0,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg01.png"
        },
        {
          id: 1,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg02.png"
        },
        {
          id: 2,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg03.png"
        },
        {
          id: 3,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg04.png"
        },
        {
          id: 4,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg05.png"
        },
        {
          id: 5,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg06.png"
        },
        {
          id: 6,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg07.png"
        },
        {
          id: 7,
          bgIcon: "/static/workbox/AppIcon/bgStyle/bg08.png"
        }
      ],
      // 前景图
      faceImg: [
        {
          id: 0,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg01.png"
        },
        {
          id: 1,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg02.png"
        },
        {
          id: 2,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg03.png"
        },
        {
          id: 3,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg04.png"
        },
        {
          id: 4,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg05.png"
        },
        {
          id: 5,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg06.png"
        },
        {
          id: 6,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg07.png"
        },
        {
          id: 7,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg08.png"
        },
        {
          id: 8,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg09.png"
        },
        {
          id: 9,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg10.png"
        },
        {
          id: 10,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg11.png"
        },
        {
          id: 11,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg12.png"
        },
        {
          id: 12,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg13.png"
        },
        {
          id: 13,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg14.png"
        },
        {
          id: 14,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg15.png"
        },
        {
          id: 15,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg16.png"
        },
        {
          id: 16,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg17.png"
        },
        {
          id: 17,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg18.png"
        },
        {
          id: 18,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg19.png"
        },
        {
          id: 19,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg20.png"
        },
        {
          id: 20,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg21.png"
        },
        {
          id: 21,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg22.png"
        },
        {
          id: 22,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg23.png"
        },
        {
          id: 23,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg24.png"
        },
        {
          id: 24,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg25.png"
        },
        {
          id: 25,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg26.png"
        },
        {
          id: 26,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg27.png"
        },
        {
          id: 27,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg28.png"
        },
        {
          id: 28,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg29.png"
        },
        {
          id: 29,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg30.png"
        },
        {
          id: 30,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg31.png"
        },
        {
          id: 31,
          faIcon: "/static/workbox/AppIcon/faceImg/faceImg32.png"
        }
      ],
      color1: "#FF7226", // 背景颜色
      color2: "#FF7226", //文字的颜色
      selectShow: -1, //控制背景效果图的选择
      selectfaceImg: 0, //控制前景图选择
      isactive: true, //控制前景图显示隐藏
      isFaceToggle: true, //控制前景图的切换
      isiconstyle: true, //控制前景图和文字的切换
      isFileStyle: true, //下载图片格式的切换
      fontIcon: "", //前景图文字的颜色
      // 默认前景图
      boxleft_img_icon: "/static/workbox/AppIcon/faceImg/faceImg01.png",
      // 下载文件的格式
      downFileStyle: "jpg",
      // 控制前景图的位置
      radio: 1,
      // 背景图片的样式
      right_bg: {
        backgroundColor: "#FF7226",
        position: "relative"
      },
      rightBgimg: {
        "background-position": "center",
        "background-size": "cover",
        backgroundImage: 'url("/static/workbox/AppIcon/bgStyle/bg00.png")'
      },
      // 前景图的样式
      boxleft_img_position: {
        position: "absolute",
        width: "68px",
        height: "68px",
        top: "50%",
        left: "50%",
        transform: "translate(-50% , -50% )"
      },
      //  前景图文字的样式
      boxleft_img_Font: {
        position: "absolute",
        width: "78px",
        height: "auto",
        fontSize: "30px",
        verticalAlign: "middle",
        display: "table-cell",
        overflow: "hidden",
        textAlign: "center",
        color: "",
        top: "50%",
        left: "50%",
        transform: "translate(-50% , -50% )"
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 使用图片
    useImg() {
      this.isactive = true;
    },
    // 使用字体
    useFont() {
      this.isactive = false;
    },
    // 使用方形图标
    useSquare() {
      this.isiconstyle = true;
    },
    // 使用圆形图标
    useRound() {
      this.isiconstyle = false;
    },
    // 使用JPG格式
    useFileStyle(style) {
      this.downFileStyle = style;
      console.log(style);
      if (style == "jpg") {
        this.isFileStyle = true;
      } else if (style == "png") {
        this.isFileStyle = false;
      }
    },
    // 选择背景图片
    useBg(item) {
      console.log(item);
      this.selectShow = item.id;
      this.rightBgimg.backgroundImage = "URL(" + item.bgIcon + ")";
    },
    // 选择前景图
    useFaceImg(item) {
      console.log(item);
      this.fontIcon = "";
      this.isFaceToggle = true;
      this.selectfaceImg = item.id;
      this.boxleft_img_icon = item.faIcon;
    },
    // 前景图的位置
    faceImgPosition(radio) {
      console.log(radio);
      if (radio == 1) {
        this.boxleft_img_position.top = "50%";
      } else if (radio == 2) {
        this.boxleft_img_position.top = "25%";
      } else {
        this.boxleft_img_position.top = "75%";
      }
    },
    // 下载图片的尺寸
    useimgSize(value) {
      var canvasWidth = value;
      var canvasHeight = value;
      var that = this;
      var shareContent = document.getElementById("icon"); // 需要繪製的部分的 (原生）dom 對象 ，注意容器的寬度不要使用百分比，使用固定寬度，避免縮放問題
      var width = shareContent.clientWidth; // 獲取(原生）dom 寬度
      console.log(width);
      var height = shareContent.clientHeight; // 獲取(原生）dom 高
      console.log(height);
      var offsetTop = shareContent.offsetTop; //元素距離頂部的偏移量
      console.log(offsetTop);
      var canvas = document.createElement("canvas"); //創建canvas 對象
      console.log(canvas);
      var context = canvas.getContext("2d");
      canvas.width = canvasWidth; //這裏 由於繪製的dom 為固定寬度，居中，所以沒有偏移 + 120
      canvas.height = canvasHeight; // 注意高度問題，由於頂部有個距離所以要加上頂部的距離，解決圖像高度偏移問題+ 100
      console.log(canvas.width, canvas.height);
      var opts = {
        // 允許加載跨域的圖片
        useCORS: true,
        tainttest: true, //檢測每張圖片都已經加載完成
        canvas: canvas, //自定義 canvas
        logging: false, //日誌開關，發佈的時候記得改成false
        width: width, //dom 原始寬度
        height: height, //dom 原始高度
      };
      console.log(canvas);
      var that = this
      html2canvas(that.$refs.contain, opts).then(function(canvas) {
        var context = canvas.getContext("2d");
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        console.log(that.downFileStyle);
        var type = that.downFileStyle;
        // console.info(type);
        console.log(canvasWidth, canvasHeight);
        Canvas2Image.saveAsImage(
          canvas,
          canvasWidth,
          canvasHeight,
          type,
          canvasWidth + "x" + canvasHeight
        );
      });
     
    },
    inputFont() {
      console.log(this.fontIcon);
      this.isFaceToggle = false;
      if (this.fontIcon.length >= 5) {
        this.$message({
          message: "最多只能输入4个字符",
          type: "error"
        });
      }
    },
    changeColor(color) {
      console.log(color);
      this.boxleft_img_Font.color = color;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.boxleft_img_Font.color = this.color2;
  }
};
</script>
<style scoped>
/*  */
.breadcrumb {
  margin: 20px 0px 0px 0px;
  background-color: transparent;
}

.content {
  background: #ffffff;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.box {
  width: 1180px;
  height: 770px;
  margin-top: 10px;
  margin-bottom: 30px;
  background-color: #fff;
  overflow: hidden;
}

.boxleft {
  width: 312px;
  height: 770px;
  border-right: 1px solid #e8e8e8;
  float: left;
  text-align: center;
}

.boxleftTitle {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #000;
  margin-top: 40px;
}
.iconBoxFa {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
.iconBox {
  overflow: hidden;
  width: 114px;
  height: 114px;
  margin-top: 20px;
}

.boxleft_img {
  position: absolute;
  background-position: center;
  width: 114px;
  height: 114px;
  background-size: cover;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 20px 0;
  background-color: #157df1;
}

.radius {
  border-radius: 8px;
}

.boxleft_msg {
  width: 232px;
  height: 48px;
  font-size: 16px;
  text-align: left;
  color: #000;
  margin-top: 111px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.imgSizeBox {
  width: 232px;
  margin-top: 20px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.imgSize {
  display: inline-block;
  border-radius: 4px;
  width: 102px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 12px;
  color: #ffffff;
  background-color: #62adff;
}

.imgSize img {
  width: 14px;
  height: 14px;
  margin-left: 14px;
  margin-top: -3px;
  margin-right: 2px;
}

.imgSize:nth-child(odd) {
  margin-right: 20px;
}

.boxright {
  width: 867px;
  height: 770px;
  display: inline-block;
}

.right_title {
  width: 100%;
  margin-left: 29px;
  margin-top: 30px;
}

.right_title span:nth-child(1) {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  margin-right: 6px;
  background-color: #62adff;
}

.right_title span:nth-child(2) {
  font-size: 16px;
  font-weight: 600;
}

.right_picker {
  margin-left: 48px;
  line-height: 48px;
  width: 100%;
  height: 26px;
  line-height: 26px;
}

.right_small_title1 {
  width: 96px;
  height: 26px;
  float: left;
  line-height: 26px;
  font-size: 16px;
  color: #5a5e66;
}

.picker {
  position: relative;
  top: -3px;
}

.right_picker {
  margin-top: 15px;
}

div >>> .el-icon-close:before {
  content: "";
}

div >>> .el-color-picker__trigger {
  width: 120px;
  height: 26px;
  border: 0;
}

div >>> .el-color-picker__color {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 0;
  border-radius: 2px;
  width: 100%;
  height: 26px;
  text-align: center;
}

div >>> .el-color-picker__color-inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  background-color: orangered;
}

div >>> .el-icon-arrow-down:before {
  content: "";
}

.right_bg_box {
  width: 100%;
  height: 60px;
  margin-left: 48px;
  margin-top: 26px;
  overflow: hidden;
}

.right_small_title2 {
  float: left;
  height: 60px;
  font-size: 16px;
  margin-right: 6px;
  color: #5a5e66;
}

.right_bg {
  float: left;
  width: 60px;
  height: 60px;
  margin-right: 12px;
}

.right_bg img {
  width: 60px;
  height: 60px;
}

div >>> .select {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 22px;
  left: 0;
  bottom: 0;
}

div >>> .right_bg_box div:nth-child(1) img {
  display: none;
}

.right_count_box {
  width: 220px;
  height: 40px;
  margin-left: 48px;
  margin-top: 23px;
  border-radius: 4px;
  border: 1px solid #ff7226;
  position: relative;
}

.right_count_box_one {
  float: left;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 50%;
}

.active {
  background-color: #ff7226;
  color: #fff;
}

.right_count_box_tow {
  float: left;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 50%;
}

.triangle1 {
  width: 18px;
  height: 10px;
  position: absolute;
  top: 27px;
  left: 25%;
  transform: translateX(-50%);
}

.triangle2 {
  width: 18px;
  height: 10px;
  position: absolute;
  top: 27px;
  left: 75%;
  transform: translateX(-50%);
}

.triangle1 img {
  width: 18px;
  height: 10px;
}

.triangle2 img {
  width: 18px;
  height: 10px;
}

.right_faceImg {
  margin-top: 16px;
  margin-left: 48px;
  width: 100%;
}

.right_faceImg_box {
  float: left;
  width: 336px;
  height: 168px;
}

.faceImg {
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 2px;
  margin-bottom: 2px;
  background-color: #999999;
}

.faceImg img {
  width: 40px;
  height: 40px;
}

.right_faceImg_location {
  display: block;
  width: 100%;
  height: 26px;
  float: left;
  margin-left: 48px;
  margin-top: 16px;
}

.radio_group {
  margin-left: 25px;
  margin-top: 5px;
}

.el-radio__label {
  font-size: 16px;
}

div >>> .el-radio__input.is-checked .el-radio__inner {
  border-color: #ff7226;
  background: #fff;
}

div >>> .el-radio__input.is-checked + .el-radio__label {
  color: #ff7226;
}

.el-radio__inner {
  width: 12px;
  height: 12px;
}

div >>> .el-radio__inner::after {
  width: 8px;
  height: 8px;
  background-color: #ff7226;
}

.iconstyle {
  float: left;
  width: 100%;
  height: 46px;
  margin-top: 13px;
}

.styleOne {
  width: 106px;
  height: 42px;
  border-radius: 4px;
  margin-left: 48px;
  line-height: 42px;
  text-align: center;
  float: left;
}

.styleTow {
  width: 106px;
  height: 42px;
  border-radius: 4px;
  margin-left: 48px;
  line-height: 42px;
  text-align: center;
  float: left;
}

.font_color {
  width: 500px;
  height: 36px;
  border: 1px solid #e4e7ed;
  margin-top: -5px;
  float: left;
  border-radius: 4px;
  padding-left: 10px;
}

input:focus {
  outline: none;
}
</style>
